<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="css/yscss.css"/>
    <link type="text/css" rel="stylesheet" href="css/chapter1.css"/>
</head>
<body>
    <pre>
        Less：CSS预编译的技术。对CSS语言做扩展。[对CSS的语法做优化处理]。
        可以使用vscode的插件easy less来帮我们将less转成css。
        最终还是会编译成css交给浏览器运行。
        less可以添加对css的编程。

        原生CSS支持定义变量代替样式值
              --变量名:变量值
              :后使用 var(--变量名)
        原生CSS的变量有作用域：
              选择器的范围就是变量的范围
        
        1）编写less
            需要创建后缀名为less的文件
            html引入的还是less编译后生成的css
        2）less的语法
            将css选择器和样式的格式也改为嵌套方式
        3）定义变量
           [1]定义变量存储属性值
                语法：@变量名:属性值
                写在样式之前。
           [2]定义变量存储选择器名
                语法：@变量名:选择器名
                使用时：@{变量名}
                定义时写在样式之前，使用时写在:之前
           [3]定义变量存储样式属性名
                语法：@变量名:属性名
                使用时：@{变量名}
                定义时写在样式之前，使用时写在:之前
        4）变量作用域
            全局变量在less文件的任意为都可使用
            局部变量写在不同的选择器中，作用域跟随选择器
            优先级：局部变量 高于 全局变量
                   作用域相同的变量，后面会覆盖前面的
        5）less中的注释
            //单行注释
            /* */多行注释
        6）带参混合设置样式
           有参无默认值：
                语法:
                    选择器名格式的变量名称(无参/有参){
                        属性名:属性值
                    }
                以上代码属于定义变量范畴，不会更改页面样式
                还需要调用变量来使用[写在less的{}里]
           有参有默认值：
                语法：
                    选择器名格式的变量名称(参数名:默认值){
                        属性名:属性值
                    }
                以上代码属于定义变量范畴，不会更改页面样式
                还需要调用变量来使用[写在less的{}里，没传实参就会调用默认值，传递实参就以实参为准]
           命名参数：在赋值时指明参数值对应的是哪个参数
                 @参数名:值   写在调用里
                 不指明默认按照顺序来赋值
        7）变量的匹配模式
            有许多同名的选择器，通过不同符号来区分。
            语法:
                选择器名格式的变量名称(@_){
                    属性名:属性值
                }
                使用_来匹配一个参数值，从而使用对应的变量
            使用时：
                选择器名格式的变量名称(匹配的单个值)
                配置值无需引号引起来，区分大小写 
        8）arguments变量
            可以通过@arguments来直接获取到所有实参的数据
            .addborder(@bw,@bc,@bs){
                //border:@bw @bc @bs;
                border:@arguments;
            }
        9）&符号的使用
            用于对层次结构中的上一级添加额外的补充[添加操作，事件]
            选择器{
                样式
                &:hover{//针对选择器元素添加hover事件
                
                }
            }
        10）变量的延迟加载
            变量的值会在样式使用后再次赋值，以 后赋值的为准
        11）运算操作
            在less中支持对变量的算术运算[ + - * / ]操作。
            添加的数据是和已有数据的单位保持一致的！
            /操作需要使用()括起来
            那如果操作数都带单位，以第一个单位为准，后续操作数只计算数值
        12）less避免编译[原样输出]
            使用~符号写在样式值之前，表示不对样式做编译处理
            ~后面通常跟字符串，表示原样输出的格式，真正编译到css后，会忽略""
        13）less继承
            对一个样式追加另一个公共样式。
            使用:extend实现继承渲染
            语法：
                推荐在选择器{}代码块的内部使用&去追加
                    选择器名格式的变量名称{
                        &:extend(需要继承的选择器名格式的变量名称);
                    }
                另一种写法：选择器后面直接写:extend
                    选择器名格式的变量名称:extend(需要继承的选择器名格式的变量名称){   
                    }
        14）import引入
            通过 @import "路径" 引入less    
            如果只引入文件名不带后缀名，那么优先识别less
            如果引入带后缀名，就以指定的为准[需要先有less保证编译能通过，默认找less]
        15）命名空间和访问符
            将样式写在统一的样式中，但是发现有重名的统一样式时，
            可以在外面再套一个自定义的选择器区域，通过自定义的选择器去直接加统一样式名，从而实现区分统一样式名的效果
                例如：前缀选择器变量直接连同名选择器变量
                      #box1.ss
                      #box#ss
        16）映射
            在统一的样式中，只使用里面包含的个别样式，就可以使用映射
            写法：同一样式名[属性名]
    </pre>
    <div id="id1">
        这是第一个div
    </div>
    <div id="id2">
        这是第二个div
    </div>
    <hr/>
    <p id="p1">
        使用less设置样式
        <strong>
            使用less
        </strong>
    </p>
    <h3 class="sty1">
        这是标题三
    </h3>
    <h4 class="sty1">
        这是标题四
    </h4>

    <div id="id3">
        id3的层
        <p id="p2">
            p2的段落
        </p>
    </div>
    <div id="id4">
        这是id4层
    </div>
    <hr/>
    <div id="id5">
        设置追加事件
    </div>
    <br/>
    <p id="p3">
        使用@arguments
    </p>
    <br/>
    <p id="p4">
       使用less的算数运算符  
    </p>

    <br/>

    <div id="id6">
        使用less继承
    </div>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

</body>
</html>